---
id: clean-design-for-clean-design
title: "클린 코드를 위한 클린 디자인"
excerpt: "디자인을 완벽하게, 제품의 품질을 올립시다"
---

# 클린 코드를 위한 클린 디자인

## 디자인 하기

In this guide, we assume that you have your own ready-to-go design.
If you want to design from scratch, you can start with the following tutorial:

- [디자인 튜토리얼 - 처음부터 시작하기](../design/intro)

## 린트 (Lint) 돌리기 & 문제 해결

**디자인 린트 (Desogn Lint) 는 무엇이고, 왜 필요한가요?**
디자인 린트는 디자인의 시각적인 부분과, 보이지 않는 구조와 값을 검사하여, 디자인의 완성도를 끌어올리는 것입니다.

린트가 없다면, 다음과 같은 문제가 생깁니다.

- 반응형이지 못한 디자인; 리사이징시 깨지는 디자인.
- `Frame13` 또는 `Rectangle411` 과 같은 불안전한 이름.
- 사용되지 않는 엘러먼트
- 텍스트 스타일이 지정되지 않은 텍스트
- 등등

<!-- ![Run design lint with Grida Assistant figma plugin on your design instantly.](../../assets/how-to-run-lints-on-your-design-with-grida-assistant-figma-plugin-15s.gif) -->

플러그인을 통해 린트를 실행시킬 경우 좋은점은, 이 린트를 통해 고쳐진 문제들이 코드의 품질 향상에 바로 적용된다는 것이며, 이 코드 결과를 실시간으로 확인할수 있다는 점 입니다.

이 과정을 반복하여 프로덕션에서 사용가능한, 만족스러운 결과를 얻을수 있습니다.
이 과정을 거친다면, 여러분의 디자인은 시각적으로도 만족스러우며, behind-the-scene 에서도 완벽한, 이유있는 디자인을 할수 있습니다.

<!-- ## See the changes -->
<!-- TODO: Add naming & layout example - before | after -->
